<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCP连接测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .success { color: green; }
        .error { color: red; }
        .info { color: blue; }
        button { padding: 10px 20px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
        button:hover { background: #0056b3; }
        .result { margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 3px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 MCP连接测试</h1>
        
        <div class="test-section">
            <h3>1. 检查MCP服务器状态</h3>
            <button onclick="checkStatus()">检查状态</button>
            <div id="statusResult" class="result"></div>
        </div>
        
        <div class="test-section">
            <h3>2. 测试MCP服务器连接</h3>
            <button onclick="testConnection()">测试连接</button>
            <div id="connectionResult" class="result"></div>
        </div>
        
        <div class="test-section">
            <h3>3. 测试MCP工具调用</h3>
            <button onclick="testMcpTool()">测试MCP工具</button>
            <div id="toolResult" class="result"></div>
        </div>
    </div>

    <script>
        async function checkStatus() {
            const resultDiv = document.getElementById('statusResult');
            resultDiv.innerHTML = '<div class="info">正在检查状态...</div>';
            
            try {
                const response = await fetch('/api/mcp-status/check');
                const data = await response.json();
                
                if (data.clientInitialized) {
                    resultDiv.innerHTML = `<div class="success">✅ MCP客户端已初始化<br>服务器: ${data.serverUrl}</div>`;
                } else {
                    resultDiv.innerHTML = `<div class="error">❌ MCP客户端未初始化</div>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ 检查失败: ${error.message}</div>`;
            }
        }
        
        async function testConnection() {
            const resultDiv = document.getElementById('connectionResult');
            resultDiv.innerHTML = '<div class="info">正在测试连接...</div>';
            
            try {
                const response = await fetch('/api/mcp-status/test-connection');
                const data = await response.json();
                
                if (data.success) {
                    resultDiv.innerHTML = `<div class="success">✅ 连接成功<br>Ping结果: ${data.pingResult}</div>`;
                } else {
                    resultDiv.innerHTML = `<div class="error">❌ 连接失败: ${data.message}</div>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ 测试失败: ${error.message}</div>`;
            }
        }
        
        async function testMcpTool() {
            const resultDiv = document.getElementById('toolResult');
            resultDiv.innerHTML = '<div class="info">正在测试MCP工具...</div>';
            
            try {
                const response = await fetch('/api/mcp-status/test-client');
                const data = await response.json();
                
                if (data.success) {
                    resultDiv.innerHTML = `<div class="success">✅ MCP工具测试成功<br>结果: ${data.message}</div>`;
                } else {
                    resultDiv.innerHTML = `<div class="error">❌ MCP工具测试失败: ${data.message}</div>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ 测试失败: ${error.message}</div>`;
            }
        }
    </script>
</body>
</html>
